<!-- 保险客户信息 -->
<template>
  <div>
    <ContainerSlot>
      <!-- 查询 -->
      <template slot="searchModule">
        <SearchForm :label-width="labelWidth" :form-config="formConfig" :form-data="formData" :slot-list="slotList">
          <template slot="searchBtn">
            <el-button type="primary" @click.prevent="search()">查询</el-button>
          </template>
        </SearchForm>
      </template>
      <!-- 操作 -->
      <template slot="operationModule">
        <el-button type="primary" @click="goExport">导出</el-button>
      </template>
      <template slot="contentModule">
        <Table :prop-list="propList" :list-data="tableData" />
      </template>
      <template slot="footerModule">
        <el-pagination :current-page="currentPage" background :page-size="pageSize" :page-sizes="[10, 20, 30]" layout=" prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </template>
    </ContainerSlot>
  </div>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import Api from '@/api/finance-insurance/insurance-customer-management/index'

export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table },
  data() {
    return {
      insuranceCustomerInfoList: [],
      title: '添加',
      total: 1,
      currentPage: 1,
      pageSize: 10,
      propList: [
        { prop: 'userName', label: '姓名', minWidth: '80' },
        { prop: 'productTitle', label: '产品名称' },
        { prop: 'phoneNumber', label: '联系方式' }
      ],
      tableData: [],
      labelWidth: '100px',
      // 表单配置
      formConfig: [
        {
          label: '客户姓名',
          prop: 'name1',
          type: 'input',
          width: '150px'
        }
      ],
      // 插槽
      slotList: [
        {
          slotName: 'searchBtn'
        }
      ],
      // 表单数据
      formData: {
        name1: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  mounted() {
    this.getInsuranceCustomerInfoList()
  },
  methods: {
    // 需要修改 propList- tableData: []
    // 条件分页查询
    async getInsuranceCustomerInfoList(keyword = '') {
      const params = {
        page: this.currentPage,
        size: this.pageSize,
        condition: {
          productUserName: keyword,
          product: {
            financialAndInsuranceFlag: 1
          }
        }
      }
      const res = await Api.queryPageByCondition(params)
      if (res.code === 200) {
        this.tableData = res.data.content
        this.tableData.forEach((item) => {
          item.userName = item.productUserName
          item.phoneNumber = item.productUserPhone
          item.productTitle = item.product.productTitle
        })
        this.total = res.data.totalElements
      }
      // console.log(res.data.totalElements, 'ww')
    },
    // 查询
    search() {
      this.getInsuranceCustomerInfoList(this.formData.name1)
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.getInsuranceCustomerInfoList()
    },
    handleSizeChange(e) {
      this.pageSize = e
      this.getInsuranceCustomerInfoList()
    },
    async goExport() {
      const res = await Api.export(this.formData.name1)
      window.open(res.request.responseURL, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
// dialog框header背景色
::v-deep .el-dialog__header {
  background: #0480fb;
}
// 设置dialog框叉号颜色
::v-deep .el-dialog__close {
  color: #fff;
}
// dialog框标题颜色
::v-deep .el-dialog__title {
  color: #fff;
}
</style>
